<template>
  <div class="record-item" :class="{'is-hover': hover, 'is-active': selectedId==detail.id}"  @mouseenter="hover=true" @mouseleave="candleMouseLeave" @click="handleClick">
    <template>
      <span class="record-name text-nowrap" v-if="editId != detail.id">
        {{detail.title}}
      </span>
      <input type="text" ref="inupt" v-show="editId == detail.id" v-model="newValue" v-focus="isEdit">
      <div class="record-button">

        <div class="icon" v-show="editId != detail.id" @click.stop="doEdit">
          <i class="icon-record-edit"></i>
        </div>

        <div class="icon" v-show="editId == detail.id" @click.stop="doEditSuccess">
          <i class="icon-record-check el-icon-check"></i>
        </div>
        <!-- 删除 -->
        <div class="icon" @click.stop="doDelete" v-show="editId != detail.id">
          <i class="icon-record-delete el-icon-close"></i>
        </div>
        <!-- 取消修改 -->
        <div class="icon" @click.stop="doCancel" v-show="editId == detail.id">
          <i class="icon-record-delete el-icon-close"></i>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
  export default {
    props: ['detail', 'editId', 'selectedId'],
    watch: {
      editId(val) {
        if(val != this.detail.id){
          this.hover = false
        }
      },
      selectedId(val) {
        if(val != this.detail.id){
          this.hover = false
        }
      }
    },
    data () {
      return {
        hover: false, //是否 鼠标hover状态
        newValue: this.detail.title,
        isEdit: false
      }
    },
    directives: {
      "focus": function (el,binding) {
        if(binding.value){
          el.focus();
        }
      }
    },
    methods: {
      /**
       * @description 当前的条目被选中，则其他条目退出选中状态，表格内容根据检索条件重新加载
       */
      handleClick() {
        this.$emit('select', this.detail.id)
      },
      // 当鼠标离开单个搜索条件 
      candleMouseLeave() {
        if(this.editId != this.detail.id){
          this.hover = false
        }
      },
      /**
       * @description 进入编辑状态
       * 如果存在别的条目在编辑状态，则别的条目退出编辑状态
       */
      doEdit() {
        this.$emit('edit', this.detail.id)
        this.$nextTick(_ => {
          this.isEdit = true;
        })
      },
      //保存成功
      doEditSuccess() {
        this.hover = false
        const params = {
          id: this.detail.id,
          title: this.newValue
        }
        this.$emit('change', params)
      },
      //删除
      doDelete() {
        this.$confirm('确定删除该条记录？', {
          type: 'warning'
        }).then(_ => {
          done()
        }).catch(_ => {})
      },
      //取消
      doCancel() {
        this.newValue = this.detail.title
        this.hover = false
        this.$emit('cancelEdit', false)
      }
    }
  }
</script>

<style lang="scss">

.record-item{
  border-radius: 20px;
  border: 1px solid #919191;
  margin: 10px 4px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
  span{
    display: block;
    color: #919191;
    font-size: 16px;
    line-height: 26px;
    padding: 0 15px;
  }
  input{
    display: block;
    width: calc(100% - 70px);
    border: 0;
    outline: 0;
    padding: 0 15px;
    line-height: 26px;
    height: 26px;
    font-size: 16px;
  }
  .record-button{
    position: absolute;
    right: 0;
    top: 0;
    display: none;
    .icon{
      width: 24px;
      height: 26px;
      display: block;
      text-align: center;
      box-sizing: border-box;
      padding-top: 5px;
      float: left;
      background: #fff;
      border-left: 1px solid #0073dd;
      cursor: pointer;
      .el-icon-check {
        color: #0073dd;
        font-size: 15px;
      }
      .el-icon-close {
        color: #0073dd;
        font-size: 15px;
      }
    }
  }
}
.record-item.is-hover{
  border-color: #0073dd;
  span{
    color: #0073dd;
    width: calc(100% - 58px)
  }
  .record-button{
    display: block;
  }
}
.record-item.is-active{
  background: #0073dd;
  border-color: #0073dd;
  span{
    color: #fff;
  }
}
</style>
